import React, { useCallback, useRef, useState } from 'react';
import { StyleSheet, ScrollView, Alert } from 'react-native';
import {
  Assets,
  Colors,
  Timeline,
  TimelineRef,
  View,
  Card,
  Text,
  Button,
} from 'react-native-ui-lib';
import { TestCase, TestSuite } from '@rnoh/testerino';

const contents = [
  'CURRENT (default) state with dashed line.\nAligned to title',
  'SUCCESS state with label.',
  'ERROR state with icon.',
  'Custom color with icon and outline.\nAligned to title',
  'Icon without background.',
  'NEXT state with outline.',
  'NEXT state with circle point and entry point.',
];

const TimelineScreen = () => {
  const [anchorIndex, setAnchorIndex] = useState(0);
  const [expand, setExpand] = useState(false);
  const anchor = useRef();
  const ref = React.createRef<TimelineRef>();

  const onPress = useCallback(() => {
    setAnchorIndex(anchorIndex === 0 ? 1 : 0);
  }, [anchorIndex]);


  const onPressExpand = useCallback(() => {
    setExpand(!expand);
  }, [expand]);

  const renderExtraContent = () => {
    return (
      <View style={{ flex: 1, marginTop: 10, backgroundColor: Colors.grey70 }}>
        <Text>
          Lorem Ipsum is simply dummy text of the printing and typesetting
          industry. Lorem Ipsum is simply dummy text of the printing and
          typesetting industry
        </Text>
      </View>
    );
  };

  const renderContent = (index = 0, anchorRef?: any) => {
    return (
      <Card padding-page backgroundColor={index === 0 ? "red" : index === 1 ? "blue" : undefined}>
        <Text text70BO ref={anchorRef}>
          Step {index + 1}
        </Text>
        <View marginT-5 padding-8 bg-grey70 br30>
          <Text>{contents[index]}</Text>
          {/* <View right>
            <Button
              marginT-10
              link
              size={'small'}
              label={!expand ? 'More info' : 'Close'}
              onPress={onPressExpand}
            />
          </View>
          {expand && renderExtraContent()} */}
        </View>
      </Card>
    );
  };

  return (
    <TestSuite name="Timeline">
      <TestCase itShould="设置 backgroundColor">
        <View padding-2>
          <Timeline
            backgroundColor="red"
            bottomLine={{ type: Timeline.lineTypes.DASHED }}
            point={{ anchorRef: anchorIndex === 0 ? anchor : undefined }}>
            {renderContent(0)}
          </Timeline>

          <Timeline
            backgroundColor="blue"
            topLine={{ state: Timeline.states.SUCCESS }}
            bottomLine={{ state: Timeline.states.ERROR }}
            point={{
              state: Timeline.states.ERROR,
              icon: '',
            }}>
            {renderContent(1)}
          </Timeline>

        </View>
      </TestCase>

      <TestCase itShould="设置 bottomLine">
        <View padding-2>
          <Timeline
            bottomLine={{ type: Timeline.lineTypes.DASHED }}
            point={{
              state: Timeline.states.DASHED,
              icon: '',
            }}>
            {renderContent(2)}
          </Timeline>

          <Timeline
            topLine={{ state: Timeline.states.SUCCESS }}
            bottomLine={{ state: Timeline.states.ERROR }}
            point={{
              state: Timeline.states.ERROR,
              icon: '',
            }}>
            {renderContent(2)}
          </Timeline>

        </View>
      </TestCase>

      <TestCase itShould="设置 point">
        <View padding-2>
          <Timeline
            bottomLine={{ type: Timeline.lineTypes.DASHED }}
            point={{
              state: Timeline.states.DASHED,
              icon: '',
            }}>
            {renderContent(2)}
          </Timeline>

          <Timeline
            topLine={{ state: Timeline.states.SUCCESS }}
            bottomLine={{ state: Timeline.states.ERROR }}
            point={{
              state: Timeline.states.ERROR,
              icon: '',
            }}>
            {renderContent(2)}
          </Timeline>

        </View>
      </TestCase>

      <TestCase itShould="设置 renderContent">
        <View padding-2>
          <Timeline
            bottomLine={{ type: Timeline.lineTypes.DASHED }}
            point={{
              state: Timeline.states.DASHED,
              icon: '',
            }}>
            {renderContent(2)}
          </Timeline>

          <Timeline
            topLine={{ state: Timeline.states.SUCCESS }}
            bottomLine={{ state: Timeline.states.ERROR }}
            point={{
              state: Timeline.states.ERROR,
              icon: '',
            }}>
            {renderContent(2)}
          </Timeline>

        </View>
      </TestCase>

      <TestCase itShould="设置 state">
        <View padding-2>

          <Timeline
            topLine={{ state: Timeline.states.SUCCESS }}
            bottomLine={{ state: Timeline.states.ERROR }}
            point={{
              state: Timeline.states.ERROR,
              icon: '',
            }}>
            {renderContent(2)}
          </Timeline>

        </View>
      </TestCase>

      <TestCase itShould="设置 topLine">
        <View padding-2>
          <Timeline
            topLine={{ state: Timeline.states.ERROR }}
            bottomLine={{ type: Timeline.lineTypes.DASHED }}
            point={{
              state: Timeline.states.DASHED,
              icon: '',
            }}>
            {renderContent(2)}
          </Timeline>

          <Timeline
            topLine={{ state: Timeline.states.SUCCESS }}
            bottomLine={{ state: Timeline.states.ERROR }}
            point={{
              state: Timeline.states.ERROR,
              icon: '',
            }}>
            {renderContent(2)}
          </Timeline>

        </View>
      </TestCase>

      <TestCase itShould="设置 testID">
        <View padding-2>
          <Timeline
            testID="TimelineID"
            ref={ref}
            topLine={{ state: Timeline.states.ERROR }}
            bottomLine={{ type: Timeline.lineTypes.DASHED }}
            point={{
              state: Timeline.states.DASHED,
              icon: '',
            }}>
            {renderContent(2)}
          </Timeline>

          <Button
            margin-20
            link
            size={'small'}
            label={'getTestID'}
            onPress={() => {
              Alert.alert('testID:' + (ref.current?.testID ?? "TimelineID"));
            }}
          />
        </View>
      </TestCase>

      {/* <TestCase itShould="例子">
        <View padding-2>
          <>
            <View row margin-20 spread>
              <Text h1 $textDefault margin-10>
                Timeline
              </Text>
              <Button
                margin-20
                link
                size={'small'}
                label={'Change Points Anchor'}
                onPress={onPress}
              />

            </View>
            <Button
              margin-20
              link
              size={'small'}
              label={'getTestID'}
              onPress={() => {
                Alert.alert('testID:' + (ref.current?.testID ?? "TimelineID"));
              }}
            />
            <ScrollView contentContainerStyle={styles.container}>
              <Timeline
                // key={String(expand)}
                // topLine={{
                //   type: Timeline.lineTypes.DASHED,
                //   entry: true
                // }}
                testID="TimelineID"
                ref={ref}
                backgroundColor="red"
                bottomLine={{ type: Timeline.lineTypes.DASHED }}
                // bottomLine={{state: Timeline.states.SUCCESS}}
                point={{ anchorRef: anchorIndex === 0 ? anchor : undefined }}>
                {renderContent(0, anchorIndex === 0 ? anchor : undefined)}
              </Timeline>
              <Timeline
                topLine={{ type: Timeline.lineTypes.SUCCESS }}
                bottomLine={{ state: Timeline.states.SUCCESS }}
                point={{
                  state: Timeline.states.SUCCESS,
                  label: 2,
                  anchorRef: anchorIndex === 1 ? anchor : undefined,
                }}>
                {renderContent(1, anchorIndex === 1 ? anchor : undefined)}
              </Timeline>

              <Timeline
                topLine={{ state: Timeline.states.SUCCESS }}
                bottomLine={{ state: Timeline.states.ERROR }}
                point={{
                  state: Timeline.states.ERROR,
                  icon: '',
                }}>
                {renderContent(2)}
              </Timeline>
              <Timeline
                topLine={{ state: Timeline.states.ERROR }}
                bottomLine={{
                  type: Timeline.lineTypes.DASHED,
                  color: Colors.purple30,
                }}
                point={{
                  type: Timeline.pointTypes.OUTLINE,
                  color: Colors.purple30,
                  icon: '',
                }}>
                {renderContent(3)}
              </Timeline>
              <Timeline
                topLine={{
                  type: Timeline.lineTypes.DASHED,
                  color: Colors.purple30,
                }}
                bottomLine={{
                  type: Timeline.lineTypes.DASHED,
                  color: Colors.blue30,
                }}
                point={{
                  icon: '',
                  removeIconBackground: true,
                }}>
                {renderContent(4)}
              </Timeline>
              <Timeline
                topLine={{
                  type: Timeline.lineTypes.DASHED,
                  color: Colors.blue30,
                }}
                bottomLine={{
                  state: Timeline.states.NEXT,
                  type: Timeline.lineTypes.DASHED,
                }}
                point={{
                  state: Timeline.states.NEXT,
                  type: Timeline.pointTypes.OUTLINE,
                }}>
                {renderContent(5)}
              </Timeline>

              <Timeline
                topLine={{
                  state: Timeline.states.NEXT,
                  type: Timeline.lineTypes.DASHED,
                }}
                bottomLine={{
                  state: Timeline.states.NEXT,
                  entry: true,
                }}
                point={{
                  state: Timeline.states.NEXT,
                  type: Timeline.pointTypes.CIRCLE,
                  labelColor: Colors.red10,
                  label: 7
                }}>
                {renderContent(6)}
              </Timeline>
            </ScrollView>
          </>
        </View>
      </TestCase> */}
    </TestSuite>
  );
};

export default TimelineScreen;

const styles = StyleSheet.create({
  container: {
    paddingBottom: 20,
  },
});
